import 'package:flutter/material.dart';

class ChipDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ChipDemoState();
}

class ChipItem {
  String title;

  ChipItem({this.title});
}

class ChipDemoState extends State<ChipDemo> {
  List<ChipItem> chipList;
  String _actionChip = 'Apple';
  List<String> _selectChip = [];
  List<String> _choiceChip = [];

  @override
  void initState() {
    super.initState();
    chipList = [
      ChipItem(title: 'Apple'),
      ChipItem(title: 'Banana'),
      ChipItem(title: 'Lemon'),
      ChipItem(title: 'pick')
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            chipList.clear();
            chipList = [
              ChipItem(title: 'Apple'),
              ChipItem(title: 'Banana'),
              ChipItem(title: 'Lemon'),
              ChipItem(title: 'pick')
            ];
            _selectChip.clear();
            _choiceChip.clear();
          });
        },
        child: Icon(Icons.restore),
      ),
      appBar: AppBar(
        title: Text('ChipDemo'),
        elevation: 0.0,
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Wrap(
              spacing: 5.0,
              runSpacing: 5.0,
              children: <Widget>[
                Chip(
                    backgroundColor: Colors.blue,
                    avatar: CircleAvatar(
                      //对chip 添加 Avatar
                      backgroundImage: NetworkImage(//网络图片
                          'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1147266979,529997455&fm=85&app=52&f=JPEG?w=121&h=75&s=35B0319B566262B20304B7EF03003027'),
                    ),
                    label: Text(
                      'james',
                      style: TextStyle(color: Colors.white),
                    )),
                Chip(
                  backgroundColor: Colors.grey,
                  label: Text(
                    'james',
                    style: TextStyle(color: Colors.white),
                  ),
                  onDeleted: () {
                    setState(() {});
                  },
                  deleteIconColor: Colors.amber,
                  deleteIcon: Icon(
                    Icons.close,
                  ),
                ),
                Chip(
                  backgroundColor: Colors.grey,
                  label: Text(
                    'anber',
                    style: TextStyle(color: Colors.white),
                  ),
                  onDeleted: () {
                    setState(() {});
                  },
                  deleteIconColor: Colors.blue,
                  deleteIcon: Icon(
                    Icons.delete,
                  ),
                )
              ],
            ),
            Divider(
              height: 2.0,
              color: Colors.grey,
            ),
            Wrap(
              spacing: 8.0,
              runSpacing: 8.0,
              children: chipList
                  .map((ChipItem item) => Chip(
                        label: Text(item.title),
                        backgroundColor: Colors.cyan,
                        deleteIconColor: Colors.white,
                        onDeleted: () {
                          setState(() {
                            chipList.remove(item);
                          });
                        },
                        deleteIcon: Icon(Icons.close),
                      ))
                  .toList(),
            ),
            Divider(
              height: 2.0,
              color: Colors.grey,
            ),
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text('actionchip value =$_actionChip'),
            ),
            Wrap(
              spacing: 8.0,
              runSpacing: 8.0,
              children: chipList
                  .map((ChipItem item) => ActionChip(
                        onPressed: () {
                          setState(() {
                            _actionChip = item.title;
                          });
                        },
                        label: Text(
                          item.title,
                          style: TextStyle(color: Colors.white),
                        ),
                        backgroundColor: Colors.cyan,
                      ))
                  .toList(),
            ),
            Divider(
              height: 2.0,
              color: Colors.grey,
            ),
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text('FilterChip value =${_selectChip.toString()}'),
            ),
            Wrap(
              spacing: 8.0,
              runSpacing: 8.0,
              children: chipList
                  .map((ChipItem item) => FilterChip(
                        selected: _selectChip.contains(item.title),
                        onSelected: (select) {
                          setState(() {
                            if (_selectChip.contains(item.title)) {
                              _selectChip.remove(item.title);
                            } else {
                              _selectChip.add(item.title);
                            }
                          });
                        },
                        label: Text(
                          item.title,
                          style: TextStyle(color: Colors.white),
                        ),
                        backgroundColor: Colors.amberAccent,
                      ))
                  .toList(),
            ),
            Divider(
              height: 2.0,
              color: Colors.grey,
            ),
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text('ChoiceChip value =${_selectChip.toString()}'),
            ),
            Wrap(
              spacing: 8.0,
              runSpacing: 8.0,
              children: chipList
                  .map((ChipItem item) => ChoiceChip(
                        selected: _choiceChip.contains(item.title),
                        onSelected: (select) {
                          setState(() {
                            if (_choiceChip.contains(item.title)) {
                              _choiceChip.remove(item.title);
                            } else {
                              _choiceChip.add(item.title);
                            }
                          });
                        },
                        label: Text(
                          item.title,
                          style: TextStyle(color: Colors.white),
                        ),
                        backgroundColor: Colors.deepOrangeAccent,
                      ))
                  .toList(),
            )
          ],
        ),
      ),
    );
  }
}
